<script setup lang="ts">
import { reactive, ref ,watch} from 'vue'
const  num =ref(0)
//监听一个属性
watch(num, () => {
  console.log("num改变了");
})

//监听多个属性
const food=ref('花菜炒蛋')

watch([food,num],()=>{
console.log('num/food改变了')
})

//监听指定的属性

const person=reactive({
  name:'Jack',
  infos:{
    gender:'男',
    age:'19'
  },
  likes:'rose'
})

watch(
  ()=>person.name,
  ()=>{
    console.log('name改变了')
  },
{
  //深度监听
  deep:true,
  //立即执行
  immediate:true
}
)

</script>

<template>
<h2 @click="num+=1">num:{{ num }}</h2>
<h2 @click="food='隆江猪脚饭'">food:{{ food }}</h2>
<h2 @click="person.name='cxk'">{{ person }}</h2>
</template>

<style>

</style>
